// useImperativeHandle, 在父组件中通过ref拿到子组件的方法

import { useRef, forwardRef, useImperativeHandle } from "react"

const Son = forwardRef((props, ref) => {
  // 实现聚焦逻辑
  const inputRef = useRef(null)
  const focusHandler = () => {
    inputRef.current.focus()
  }
  // 把聚焦方法暴露出去
  useImperativeHandle(ref, () => {
    return {
      // 暴露的方法
      focusHandler
    }
  })
  return <input type="text" ref={inputRef} />
})

function App() {
  const sonRef = useRef(null)
  const sonFocusHandler = () => {
    console.log(sonRef.current)
    sonRef.current.focusHandler()
  }
  return (
    <div>
      <Son ref={sonRef} />
      <button onClick={sonFocusHandler}>focus</button>
    </div>
  )
}
export default App